<template>
  <div class="com-container">
    <div class="com-chart" ref="chart_ref"></div>
  </div>
</template>

<script>
// 引入地图矢量数据
import huizhou from '../../public/static/map/huizhou.json'
export default {
  data() {
    return {
      chartInstance: null, // echart实例
      allData: null, // 服务器返回的数据
      mapData: {} // 所获取省份的地图矢量数据
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    // 在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter()
  },
  destroyed() {
    // 在组件销毁的时候需要把监听器取消掉，防止内存的泄露
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.chart_ref)
      // 获取中国地图的矢量数据并注册
      this.$echarts.registerMap('huizhou', huizhou)
      // 对图表初始化配置的控制
      const initOption = {
        series: {
          type: 'map',
          map: 'huizhou',
          geoIndex: 1,
          aspectScale: 1.125, // 长宽比
          showLegendSymbol: false,
          top: '1%',
          bottom: '10px',
          itemStyle: {
            areaColor: '#2172bf',
            borderColor: '#084d95',
            borderWidth: '2',
            labelLine: {
              show: false
            }
          },
          label: {
            show: true,
            color: '#fff',
            position: 'center'
          }
        },
        tooltip: {
          show: true,
          formatter: '{b}：{c}'
        }
      }
      this.chartInstance.setOption(initOption)
    },
    // 获取服务器数据
    getData() {
      const data = [
        {
          // 数据项的名称
          name: '惠城区',
          // 数据项值8
          value: 10
        }, {
          name: '惠阳区',
          value: 20
        }, {
          name: '龙门县',
          value: 20
        }, {
          name: '博罗县',
          value: 20
        }, {
          name: '惠东县',
          value: 20
        }
      ]
      this.allData = data
      this.updateChart()
    },
    // 更新图表
    updateChart() {
      // 处理图表需要的数据
      const dataoption = {
        series: {
          data: this.allData,
          label: {
            formatter: (arg) => {
              return `${arg.name}\n${arg.value}`
            }
          }
        }
      }
      this.chartInstance.setOption(dataoption)
    },
    // 当浏览器大小发生变化的时候，会调用该方法来适配屏幕
    screenAdapter() {
      const titleFontSize = this.$refs.chart_ref.offsetWidth / 100 * 3.6 // 这个比例比较合适
      // 和分辨率大小相关的配置项
      const adapterOption = {
        series: {
          label: {
            fontSize: titleFontSize / 1.6
          }
        }
      }
      this.chartInstance.setOption(adapterOption)
      // 需要手动调用图表对象的resize方法才能产生效果
      this.chartInstance.resize()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
